<template>
    <div class="common-container">
        <el-row class="backstyle">
            <el-col :span="18">
                <el-container style="height: 100vh; overflow: auto; margin-bottom: 30px">
                    <el-container>
                        <el-main class="content_style" style="margin-right: 15px">
                            <el-container>
                                <el-header class="other_header" style="height: 40px; line-height: 40px; text-align: center; color: #5d9cec"
                                    >测试卷</el-header
                                >
                                <el-main>
                                    <el-row>
                                        <el-row
                                            :class="`classabc${index + 1}`"
                                            v-for="(item, index) in datalist"
                                            :key="index"
                                            style="margin-bottom: 20px"
                                        >
                                            <el-col :span="2">
                                                <el-button class="i_style">{{ index + 1 }}</el-button>
                                            </el-col>
                                            <el-col :span="21">
                                                <el-row
                                                    style="border-bottom: 1px solid rgb(228, 228, 228); line-height: 40px; height: 40px"
                                                >
                                                    {{ item.title }}
                                                </el-row>
                                                <el-row>
                                                    <!-- 单项填空  -->
                                                    <div v-if="item.type === 'input'" style="margin-top: 20px">
                                                        <el-input
                                                            placeholder="请输入"
                                                            v-model="ids[index]"
                                                            @blur="gotobutton(index)"
                                                        ></el-input>
                                                    </div>
                                                </el-row>
                                                <el-row v-if="item.type === 'select'" style="margin-top: 20px">
                                                    <!-- 选择填空  -->
                                                    <div>
                                                        <el-select v-model="ids[index]" placeholder="请选择" @change="gotobutton(index)">
                                                            <el-option
                                                                v-for="i in item.textList"
                                                                :key="i"
                                                                :label="item.textList[i]"
                                                                :value="i + ''"
                                                            >
                                                            </el-option>
                                                        </el-select>
                                                    </div>
                                                </el-row>
                                                <el-row v-for="i in item.textList" :key="i" style="margin-top: 20px">
                                                    <!-- 单选 -->
                                                    <div class="warp" v-if="item.type === 'radio'">
                                                        <el-radio v-model="ids[index+10]" :label="i" @change="gotobutton(index)"></el-radio>
                                                        <span>{{ item.textList[i] }}</span>
                                                    </div>

                                                    <!-- 多选  -->
                                                    <div v-else-if="item.type === 'checkbox'">
                                                        <el-checkbox  :label="i" @change="gotobutton(index)"></el-checkbox>
                                                        <span>{{ item.textList[i] }}</span>
                                                    </div>
                                                </el-row>
                                            </el-col>
                                        </el-row>
                                    </el-row>
                                </el-main>
                            </el-container>
                        </el-main>
                    </el-container>
                </el-container>
            </el-col>
            <el-col :span="6">
                <el-container style="margin-right: 50px; position: fixed">
                    <el-header class="header_style" style="line-height: 40px; height: 40px">测试序号</el-header>
                    <el-main class="content_style">
                        <p>倒计时：{{ timeout }}</p>
                        <el-row style="margin-top: 10px">
                            <el-button
                                @click="submit(index + 1)"
                                class="button_style"
                                v-for="(item, index) in datalist"
                                :style="item.show"
                                :key="index"
                                >{{ index + 1 }}</el-button
                            >
                        </el-row>
                    </el-main>
                </el-container>
            </el-col>
        </el-row>
        <el-row class="footer" :gutter="20" type="flex" justify="end">
            <el-col :span="2">
                <el-button type="primary" size="medium" @click="back">取消</el-button>
            </el-col>
            <el-col :span="2">
                <div>
                    <div class="mask" v-if="showModal" @click="showModal = false"></div>
                    <div class="pop" v-if="showModal">
                        <img src="../assets/img/sucess.png" style="width: 100%; height: 100%" />
                    </div>
                    <el-button @click="handleSubmit" size="medium" type="primary">提交</el-button>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    data() {
        return {
            datalist: '',
            timeout: '',
            inputVal(e) {
                return e;
            },
            typeMap: {
                radio: '单选',
                checkbox: '多选',
                input: '问答',
                select: '选择'
            },
            ids:[],
            showModal: false,
            grades: 0
        };
    },
    created() {
        const { itemList } = this.$route.query;
        let len =itemList.length || 30
        // this.ids = new Array(len).fill(11)
        for(let i = 0;i<len;i++){
            this.ids.push(this.randomWord())
        }
        console.log(this.ids)
        this.datalist = itemList;
        console.log('itemList', itemList);
        this.countTimes()
        
    },
    methods: {
      
        submit(i) {
            var wei = 'classabc' + i;
            var el = document.getElementsByClassName(wei)[0];
            console.log(el.offsetTop);
            this.$nextTick(function () {
                window.scrollTo({
                    behavior: 'smooth',
                    top: el.offsetTop
                });
            });
        },
        back() {
            this.$confirm('是否取消回到首页?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    this.$router.push({
                        path: `/home`
                    });
                })
                .catch(() => {
                    /*   this.$message({
            type: 'info',
            message: ''
          });  */
                });
        },
        PritfGrade() {
            let a;
            for (a in this.$data.datalist) {
                if (this.$data.datalist[a].answer === this.$data.datalist[a].radio) {
                    this.$data.grades = this.$data.grades + 1;
                }
            }
            this.$message({
                message: '恭喜你，提交成功',
                type: 'success'
            });
        },
        gotobutton(index) {
            console.log(index);
            this.$data.datalist[index].show = 'background: #00ABEA;';
        },
        timer: function () {
            let that = this;
            setInterval(function () {
                that.timeout--;
                if (that.timeout == 0) {
                    that.isEnd();
                }
            }, 1000);
        },
        countTimes() {
            const date = new Date();
            const now = date.getTime();
            const endDate = new Date('2022-12-03 00:00:00');
            const end = endDate.getTime();
            let differTime = end - now;
            let h, m, s;
            if (differTime >= 0) {
                h = Math.floor(differTime / 1000 / 60 / 60);
                m = Math.floor((differTime / 1000 / 60) % 60);
                s = Math.floor((differTime / 1000) % 60);
                h = h < 10 ? '0' + h : h;
                m = m < 10 ? '0' + m : m;
                s = s < 10 ? '0' + s : s;
                let timeDom = '倒计时：' + h + '小时' + m + '分' + s + '秒';
                this.timeout = timeDom
                setTimeout(()=>{
                    this.countTimes();
                }, 1000);
            } else {
                let timeDom = '00小时 00分 00秒';
                this.timeout = timeDom
            }
        },
          handleSubmit() {
            this.showModal = true;
            setTimeout(() => {
                this.showModal = false;
                this.$router.push({
                    path: `/home`
                });
            }, 1000);
        },
        randomWord(){
            const min = 0;
            const max = 1000;
            return (Math.round(Math.random() * (max - min)) + min);
        },
    }
};
</script>

<style scoped>
.header_style {
    margin-top: 5px;
    border: 1px solid rgb(228, 228, 228);
    text-align: left;
    padding-left: 10px;
}

.other_header {
    background: rgb(255, 255, 255);
    font-size: 20px;
    font-weight: 400px;
    color: rgb(143, 201, 211);
}

.content_style {
    border: 1px solid rgb(228, 228, 228);
    text-align: left;
    padding-left: 10px;
}

.button_style {
    margin-top: 10px;
    margin-left: 18px;
    margin-left: 10px;
    width: 60px;
    text-align: center;
}

.i_style {
    background: rgb(93, 156, 236);
    font-weight: bold;
    border-radius: 100%;
    color: #fff;
}

.mask {
    background-color: #000;
    opacity: 0.3;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
.pop {
    background-color: #fff;
    position: fixed;
    top: 300px;
    left: 550px;
    width: calc(100% - 1000px);
    height: calc(100% - 570px);
    z-index: 2;
}

.el-radio {
    margin-right: auto;
}


</style>

